<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="名字" v-model="listQuery.userName">
      </el-input>
      <el-select clearable  @change='handleFilter' class="filter-item" style="width: 130px" v-model="listQuery.type" placeholder="账户类型">
        <el-option label="积分" value="1">
        </el-option>
        <el-option label="成长值" value="0">
        </el-option>
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
      <!--<el-button class="filter-item" type="primary" :loading="downloadLoading"  icon="el-icon-download" @click="">导出</el-button>-->
    </div>

    <el-table :data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"
              v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row >
      <el-table-column align="center" label='排序ID' width="80">
        <template slot-scope="scope">
          {{scope.$index}}
        </template>
      </el-table-column>
      <el-table-column label="账户记录ID"   width="100" align="center">
        <template slot-scope="scope">
          {{scope.row.accountRecordId}}
        </template>
      </el-table-column>
      <el-table-column label="用户ID" width="90" align="center">
        <template slot-scope="scope">
          {{scope.row.userId}}
        </template>
      </el-table-column>
      <el-table-column label="用户名" width="160" align="center">
        <template slot-scope="scope">
          {{scope.row.userName}}
        </template>
      </el-table-column>
      <!--<el-table-column label="电话" width="130" align="center">
        <template slot-scope="scope">
          {{scope.row.phone}}
        </template>
      </el-table-column>-->

      <el-table-column class-name="status-col" label="账户类型" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.type | statusFilter">{{scope.row.type === 0 ? '成长值' : '积分'}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="变动值" width="110" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.amount}}</span>
        </template>
      </el-table-column>

      <el-table-column label="当前值" width="110" align="center">
        <template slot-scope="scope">
          {{scope.row.nowAmount}}
        </template>
      </el-table-column>

      <el-table-column label="变动时间" width="160" align="center">
        <template slot-scope="scope">
          {{scope.row.updateTime}}
        </template>
      </el-table-column>

      <el-table-column label="变动信息"  align="center">
        <template slot-scope="scope">
          {{scope.row.info}}
        </template>
      </el-table-column>
    </el-table>

    <div style="padding-top: 15px;text-align: center">
      <el-pagination
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page=currentPage
                     :page-sizes="[10, 20, 30]"
                     :page-size=pageSize
                     layout="total, sizes, prev, pager, next, jumper"
                     :total=total>
      </el-pagination>
    </div>

  </div>
</template>

<style>

  .filter-container{
    padding-bottom: 20px;
  }

</style>

<script>
import { List } from '../../api/accountRecord'

import { List as accountRecordList } from '../../api/accountRecord'

export default {

  data() {
    return {
      list: [],
      accountRecordList: null,
      listLoading: true,
      buttonLoading: false,
      listQuery: {
        userName: null,
        type: null
      },
      temp: {
        accountRecordId: null,
        userId: '',
        userName: '',
        type: '',
        amount: '',
        nowAmount: '',
        updateTime: '',
        info: ''
      },
      dialogFormVisible: false,
      dialogStatus: '',
      downloadLoading: false,
      status: [
        { type: '成长值', val: 0 },
        { type: '积分', val: 1 }
      ],
      rules: {
        userId: [{ required: true }],
        userName: [{ required: true }],
        type: [{ required: true }],
        amount: [{ required: true }],
        nowAmount: [{ required: true }],
        updateTime: [{ required: true }],
        info: [{ required: true }]
      },
      total: 0,
      currentPage: 1,
      pageSize: 10
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        // draft: 'gray',
        0: 'danger'
      }
      return statusMap[status]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleFilter() {
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      List(this.listQuery.type, this.listQuery.userName, this.listQuery.info).then(response => {
        this.list = response.data
        this.total = response.data.length
        this.currentPage = 1
        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    initSellers() {
      if (this.sellerList == null) {
        accountRecordList(0, 1).then(res => {
          this.sellerList = res.data.list
        })
      }
    },
    resetTemp() {
      this.temp = {
        accountRecordId: null,
        userId: '',
        userName: '',
        type: '',
        amount: '',
        nowAmount: '',
        updateTime: '',
        info: ''
      }
    }
  }
}
</script>
